<template>
  <div class="tixian-box">
    <div class="k-tixian">
      <span>可提现金额(元)</span>
      <span>{{ toThousands(formData.rest) }}</span>
    </div>
    <div class="tixian-jine-input">
      <span>提现金额</span>
      <div>
        <span>￥</span>
        <van-field class="jine-input" type="number" v-model="fee" placeholder="提现金额" />
        <span @click="tiAll(formData.rest)">全部</span>
      </div>
    </div>
    <div class="tix-zhanghu-box">
      <span>提现账户</span>
      <div @click="toBindZhanghu">
        <img src="@/assets/icons/yhk-icon.png" alt="">
        <span>{{ zhanghuData.billNo || '去绑定提现账户' }}</span>
      </div>
    </div>
    <div class="wxts-box">
      <div v-for="item in configData.wxts" :key="item">{{ item }}</div>
    </div>
    <van-button style="margin-top: 20px;" type="primary" round block @click="submit">确认提现</van-button>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs } from 'vue'
import { useStore } from 'vuex';
import api from '../api'
import { getStore, toThousands } from '@/utils/utils';
import { showToast } from 'vant';
import { useRoute, useRouter } from 'vue-router';
export default {
  setup() {
    const store = useStore()

    const route = useRoute()
    const router = useRouter()

    const state = reactive({
      gysShopId: null,
      fee: null,

      formData: {},
      zhanghuData: {},
      configData: {},
    })

    function getInStatics() {
      let json = {
        shopId: getStore('USER_INFO').companyId
      }
      api.inStatics(json).then(res => {
        if (res.code == '200') {
          state.formData = res.data
        } else {
          showToast(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function getZhanghu() {
      const obj = {
        shopId: getStore('USER_INFO').companyId
      }
      api.getAccount(obj).then(res => {
        if (res.code == '200') {
          state.zhanghuData = res.data
        } else {
          showToast(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function toBindZhanghu() {
      router.push({ path: '/more/tixzhanghu' })
    }

    function tiAll(num) {
      let myNum = num
      if (typeof myNum == 'string' && myNum?.indexOf(',') > -1) {
        myNum = myNum.replace(',', "")
      }
      state.fee = Number(myNum)
    }

    function getWithdrawConf() {
      const obj = {
        shopId: state.gysShopId
      }
      api.withdrawConf(obj).then(res => {
        if (res.code == '200') {
          state.configData = res.data
          state.configData.wxts = setWxts(res.data.remarks)
        } else {
          showToast(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function setWxts(wxts) {
      const myArr = wxts.split('\n')
      return myArr
    }

    function submit() {
      const obj = {
        fee: state.fee,
        payType: 11,
        shopId: state.gysShopId
      }
      api.withdrawSubmit(obj).then(res => {
        if (res.code == '200') {
          state.fee = null
          getInStatics()
          setTimeout(() => {
            showToast('提现已受理')
          }, 200);
        } else {
          showToast(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    onMounted(() => {
      state.gysShopId = route.query.shopId || null
      store.commit("setNavBar", {
        title: '提现',
        show: true,
        left: true,
        leftType: 'back',
        right: false,
        rightType: 'search',
        path: '/index/uploadData'
      })
      getInStatics()
      getZhanghu()
      getWithdrawConf()
    })

    return {
      ...toRefs(state),
      toThousands,
      toBindZhanghu,
      tiAll,
      submit,
    }
  }
}
</script>

<style lang="scss" scoped>
.tixian-box {
  width: 100%;
  background-color: #f3f3f3;
  box-sizing: border-box;
  padding: 0 20px;
  .k-tixian {
    box-sizing: border-box;
    padding: 40px 20px;
    display: flex;
    flex-flow: column;
    align-items: center;
    gap: 10px;
    > span:first-of-type {
      font-size: 12px;
      color: #aaaaaa;
    }
    > span:last-of-type {
      font-size: 24px;
      color: #000000;
      font-weight: 500;
    }
  }
  .tixian-jine-input {
    background-color: #ffffff;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 15px;
    > span {
      color: #424242;
      font-size: 12px;
    }
    > div {
      display: flex;
      align-items: center;
      > span {
        flex-shrink: 0;
      }
      > span:first-of-type {
        font-size: 24px;
      }
      > span:last-of-type {
        font-size: 12px;
        color: #488bfe;
      }
      .jine-input {
        font-size: 24px;
        ::placeholder {
          font-size: 14px;
        }
      }
    }
  }
  .tix-zhanghu-box {
    background-color: #ffffff;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 15px;
    margin-top: 10px;
    > span {
      color: #424242;
      font-size: 12px;
    }
    > div {
      background-color: #9fd699;
      box-sizing: border-box;
      padding: 15px;
      margin-top: 10px;
      border-radius: 5px;
      display: flex;
      align-items: center;
      gap: 10px;
      > img {
        width: 40px;
      }
      > span {
        font-size: 16px;
        color: #ffffff;
      }
    }
  }
  .wxts-box {
    box-sizing: border-box;
    padding: 10px 0;
    color: #ff2b2b;
    font-size: 10px;
    > div {
      margin-bottom: 5px;
    }
  }
}
</style>